<template>
	<view id="content"  :class="dark?'content-dark':'content'" :data-skin="skin">
		<!-- <view class="bakcground"></view> -->
		<view class="l-head" :class="{'l-head-dark':dark}">
			<!-- {{list[list.length-1].page_name}} -->
			{{title}}
		</view>
		<!-- //文本的主要内容 -->
		<view class="scrollbar"  @scroll.native="appScroll" >
			<view class="scrollbarCt" >
				<view class="l-placeholder"></view>
				<view class="l-body" @click="catalogue()" @touchmove="retrues()">
					<view v-for='item in list'>
						<view style="padding:0rpx 32rpx 60rpx;">
							<h3 v-html='item.page_name'></h3>
							<view class="font_content" v-html='item.page_content' :data-skin='paddings'></view>
						</view>
					</view>
					<text class="loading-text">
						{{loadingType === 0 ? contentText.contentdown:(loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
					</text>
					<view class="l-placeholder"></view>
				</view>
			</view>
		</view>
		<view class="header_out" v-show="showSet" :class="{'header_out_dark':dark}">
			<image class="l-icon-more" src="../../static/return.png" @click="navigateBack()">
		</view>
		<view class="foot_operation" :class="{'foot_operation_dark':dark}" v-show="showSet">
			 <view>
				 <view class="foot_center" @click="navtoComment">
					 <image src="../../static/icon/catalog.png"></image>
					 <view>目录</view>
				 </view>
			 </view>
			 <view>
				 <view class="foot_center" @click="clickDark()">
					 <image src="../../static/icon/nightMode.png"></image>
					 <view>夜间</view>
				 </view>
			 </view>
			 <view>
				 <view class="foot_center" @click="set()">
					 <image src="../../static/icon/set.png"></image>
					 <view>设置</view>
				 </view>
			 </view>
			 <view>
				 <view class="foot_center" @click="navto_books()">
					 <image src="../../static/icon/synopsis.png"></image>
					 <view>简介</view>
				 </view>
			 </view>
		</view>
		<view  style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;" v-if="set_show" @click="set_reture()" @touchmove.stop.prevent ="set_reture()" ></view>
		<view class="set_view" v-if="set_show">
			<view class="set_one">
				<text>背景</text>
				<view>	
					<text class="bg-color" :class="skin==item.value?'hover':''"  v-for="item in set_bg_color" :style="'background-color:'+item.bg+';'" @click="bg_select(item)"></text>
				</view>
			</view>
			<view class="set_one">
				<text>间距</text>
				<view>
					<text class="spacing" v-for="item in cn_pad" @click="pd_select(item)" >{{item.img}}</text>
				</view>
			</view>
			<view class="set_one">
				<text>字号</text>
				<view>
					<text class="font_size">A -</text>
					<text class="font_size">A +</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var self;
	export default {
		data() {
			return {
				showSet : false,
				list:[],
				dark : false,
				NumSerial:undefined,
				contentText: {			 //显示上拉加载
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				loadingType: 0, //加载更多状态
				nextID : undefined,
				page : undefined,
				title : '',
				skin : 'ypz',
				set_bg_color: [{
					bg : '#f6f7f9',
					value : 'light'
				},{
					bg : '#c4b395',
					value : 'ypz'
				},{
					bg : '#c8e8c8',
					value : 'gree'
				},{
					bg : '#c3d4e6',
					value : 'blue'
				},{
					bg : '#e0b6c4',
					value : 'lmf'
				}],
				paddings: 20,
				cn_pad : [{
					img : '20px',
					value : 'secome'
				},{
					img : '30px',
					value : 'three'
				},{
					img : '40px',
					value : 'four'
				}],
				set_show : false
			}
		},
		onLoad(res){
			self = this;
			if(res.NumSerial){
				self.NumSerial = res.NumSerial;
			} 
		},
		onShow() {
			self.list = [];
			self.page = uni.getStorageSync('page_'+self.NumSerial).ID;
			if(self.page){
				self.getRequst(self.page);
			}else{
				this.$request.getRequst('/read_query?NumSerial='+self.NumSerial).then(res=>{
					self.getRequst(res.content[0].page_id);
				}).catch(err=>{
					self.getRequst(self.page);
				});
			}
		},
		onReachBottom(){
			this.getRequst(this.nextID);
		},
		methods:{
			appScroll(){
				//获取元素顶部
				let scrollbar = this.$el.querySelector('.scrollbar');
				let scrollbarCt = this.$el.querySelector('.scrollbarCt');
				let scrollTop = scrollbar.scrollTop;
				if(scrollbarCt.offsetHeight==scrollbar.offsetHeight+scrollTop){
					this.getRequst(this.nextID);
				} 
				if(this.showSet){
					this.retrues();
				}
			},
			getRequst(page){
				this.$request.getRequst('/read?page='+page+'&NumSerial='+self.NumSerial).then(res=>{
					let pageData = {
						NumSerial : self.NumSerial,
						ID : page
					}
					uni.setStorage({
						key:'page_'+self.NumSerial,
						data: pageData
					});
					self.list.push(res.content.read_info);
					self.title = res.content.read_info.page_name;
					self.NumSerial = res.content.read_info.NumSerial;
					self.nextID = res.content.read_info.nextID;
				}).catch(res=>{
					console.log(res) 
				});
				let data = {
					page : page,
					NumSerial : self.NumSerial
				}
				this.$request.postRequst('/read_record',data).then(res=>{
				})
			},
			catalogue(){
				this.showSet = !this.showSet;
			},
			retrues(){
				this.showSet = false;
			},
			navigateBack(){
				uni.navigateBack();
			},
			clickDark(){
				this.dark = !this.dark;
			},
			navtoComment() {
				this.$store.state.books_type = 1;
				uni.navigateTo({
					url: `/pages/pageNav/pageNav?NumSerial=${self.NumSerial}`
				})
			},
			navto_books(){
				uni.navigateTo({
					url: `/pages/detail/detail?NumSerial=${self.NumSerial}`
				})
			},
			set(){
				this.set_show = true
				//调节屏幕亮度
				// uni.setScreenBrightness({
				//     value: 0.5,
				//     success: function () {
				//         console.log('success');
				//     }
				// });
				//获取屏幕亮度
				// uni.getScreenBrightness({
				//     success: function (res) {
				//         console.log('屏幕亮度值：' + res.value);
				//     }
				// });
			},
			bg_select(item){
				this.skin = item.value
			},
			pd_select(item){
				this.paddings = item.value
			},
			set_reture(){
				this.set_show = false
			}
		},
		destroyed() {
			var self = this;
			document.removeEventListener('scroll', self.appScroll)
		}
	}
</script>

<style scoped>
	/* 粉红色 */
	.content[data-skin=lmf]{
		background-color: #e0b6c4;
	}
	.content[data-skin=lmf] .l-head{
		background-color: #e0b6c4;
	}
	.content[data-skin=lmf] .foot_operation{
		background-color: #e0b6c4;
	}
	.content[data-skin=lmf] .header_out{
		background-color: #e0b6c4;
	}
	/* 羊皮色 */
	.content[data-skin=ypz]{
		background-color: #c4b395;
	}
	.content[data-skin=ypz] .l-head{
		background-color: #c4b395;
	}
	.content[data-skin=ypz] .foot_operation{
		background-color: #c4b395;
	}
	.content[data-skin=ypz] .header_out{
		background-color: #c4b395;
	}
	/* 亮色 */
	.content[data-skin=light]{
		background-color: #f6f7f9;
	}
	.content[data-skin=light] .l-head{
		background-color: #f6f7f9;
	}
	.content[data-skin=light] .foot_operation{
		background-color: #f6f7f9;
	}
	.content[data-skin=light] .header_out{
		background-color: #f6f7f9;
	}
	/* 绿色 */
	.content[data-skin=gree]{
		background-color: #c8e8c8;
	}
	.content[data-skin=gree] .l-head{
		background-color: #c8e8c8;
	}
	.content[data-skin=gree] .foot_operation{
		background-color: #c8e8c8;
	}
	.content[data-skin=gree] .header_out{
		background-color: #c8e8c8;
	}
	/* 蓝色 */
	.content[data-skin=blue]{
		background-color: #c3d4e6;
	}
	.content[data-skin=blue] .l-head{
		background-color: #c3d4e6;
	}
	.content[data-skin=blue] .foot_operation{
		background-color: #c3d4e6;
	}
	.content[data-skin=blue] .header_out{
		background-color: #c3d4e6;
	}
	.content-dark{
		background: #000000;
		color:#999;
	}
	.foot_operation{
		position: fixed;
		bottom: 0;
		height: 120rpx;
		width: 100%;
		z-index: 101;
		overflow: hidden;
		background-color:#fff;
		/* box-shadow:0rpx -5rpx 20rpx #C0C0C0; */
		border-top: 1upx solid #C0C0C0;
		animation: myfirst 0.5s;
		-webkit-animation: myfirst 0.5s; /* Safari 与 Chrome */
		
	}
	.foot_operation_dark{
		background-color: #000;
		box-shadow: 0px -2px 9px #000;
	}
	.foot_operation>view{
		float: left;
		width: 25%;
		height: 120rpx;
		text-align: center;
		position: relative;
	}
	.foot_operation image{
		width:60rpx;
		height: 60rpx;
		/* background-color: #ddd; */
	}
	.foot_operation>view .foot_center{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		font-size: 24upx;
	}
	.l-placeholder{
		height: 60rpx;
	}
	.l-head{
		height: 60rpx;
		bottom: 0;
		position: fixed;
		/* background-color: rgba(0,0,0,0.1); */
		width: 100%;
		z-index: 100;
		color: #999;
		font-size: var(--f-size-1);
	}
	.l-head-dark{
		background-color: #000;
	}
	.l-body {
		padding: 0;
		font-size: 32rpx;
		/* color: #D1D1D6; */
		/* line-height: 50rpx; */
	}
	.l-body>view{
		/* padding: 32rpx; */
	}
	h3 {
		/* font-size: 50rpx; */
		margin-bottom: 20rpx;
		font-weight: normal;
	}
	.read-section p{
		 text-indent:32px;
		 padding-bottom: 30rpx;
	}
	.header_out{
		position: fixed;
		top: 44upx;
		width: 100%;
		height:80rpx;
		background-color: #fff;
		z-index: 101;
		line-height: 70rpx;
		/* box-shadow: 0rpx 5rpx 10rpx #C0C0C0; */
		border-bottom: 1upx solid #C0C0C0;
		overflow: hidden;
		animation: mysecomed 0.5s;
		-webkit-animation: mysecomed 0.5s; /* Safari 与 Chrome */
	}
	.header_out_dark{
		background-color: #000;
		box-shadow: 0px 2px 4px #000;
	}
	.header_out image{
		width: 22rpx;
		height: 40rpx;
		position: absolute;
		top: 20upx;
		left: 2%;
		/* transform: translateY(-50%); */
	}
	@keyframes myfirst
	{
	    from {height: 0;}
	    to {height: 120rpx;}
	}
	 
	@-webkit-keyframes myfirst /* Safari 与 Chrome */
	{
	    from {height: 0;}
	    to {height: 120rpx;}
	}
	@keyframes myfirst1
	{
	    from {height: 120rpx;}
	    to {height: 0rpx;}
	}
	 
	@-webkit-keyframes myfirst1 /* Safari 与 Chrome */
	{
	    from {height: 120rpx;}
	    to {height: 0rpx;}
	}
	@keyframes mysecomed
	{
	    from {height: 0;}
	    to {height: 80rpx;}
	}
	 
	@-webkit-keyframes mysecomed /* Safari 与 Chrome */
	{
	    from {height: 0;}
	    to {height: 80rpx;}
	}
	@keyframes mysecomed1
	{
	    from {height: 70rpx;}
	    to {height: 0rpx;}
	}
	 
	@-webkit-keyframes mysecomed1 /* Safari 与 Chrome */
	{
	    from {height: 70rpx;}
	    to {height: 0rpx;}
	}
	.loading-text{
		width: 100%;
		height: 50upx;
		line-height: 50upx;
		font-size: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		color: #999;
	}
	.scrollbar{
		
	}
	::-webkit-scrollbar{
		display: none;
	}
	.font_content >>> p{
		text-indent: 60rpx;
		padding: 20rpx 0;
	}
	.font_content[data-skin=secome] >>> p{
		padding: 20rpx 0;
	} 
	.font_content[data-skin=three] >>> p{
		padding: 30rpx 0;
	} 
	.font_content[data-skin=four] >>> p{
		padding: 40rpx 0;
	} 
	.set_view{
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		left: 0;
		padding: 30upx;
		background-color: #fff;
		z-index: 101;
		border-top: 1upx solid #eee;
	}
	.set_one{
		display: flex;
		align-items: center;
		color: #999;
		padding: 15upx 0;
	}
	.set_one>text{
		width: 100upx;
		display: inline-block;
	}
	.set_one>view{
		flex: 1;
		display: flex;
		justify-content: space-between;
	}
	.set_one .bg-color{
		width: 50upx;
		height: 50upx;
		background-color: #c8e8c8;
		display: inline-block;
		border-radius: 50%;
		border: 1upx solid #c8e8c8;
	}
	.set_one .bg-color.hover{
		border: 1upx solid red;
	}
	.set_one .spacing{
		width: 60upx;
		height: 60upx;
		display: inline-block;
		line-height: 60upx;
	}
	.set_one .font_size{
		width: 250upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		font-size: 32upx;
		color: #000;
		background-color: #d1d1d1;
	}
</style>
